<script setup lang="tsx">
import { type PlusColumn, PlusDescriptions } from "plus-pro-components";
import { closeAllDialog } from "@/components/ReDialog";
import { useDeliver } from "../utils/hook";
const { onSearch } = useDeliver();
import { onMounted, ref } from "vue";
const prop = defineProps({
  info: {
    default: () => []
  }
});
import { acceptanceApi, createInventoryApi } from "@/api/inventoryApi";
import { updateStatus } from "@/api/deliverApi";
onMounted(() => {
  switch (prop.info[0].logisticsStep) {
    case 0:
      active.value = 1;
      break;
    case 1:
      active.value = 2;
      break;
    case 2:
      active.value = 3;
      break;
    default:
      active.value = 1;
      break;
  }
});
const orderInfoArr = ref(prop.info[0].orderGoods);
//步骤
const active = ref(1);
//存货单
const formArr = ref({
  status: "",
  remarks: "",
  date: ""
});
const next = () => {
  if (active.value === 3) {
    ruleFormRef.value.validate(valid => {
      if (valid) {
        let goodsList = ref([]);
        for (var i = 0; i < orderInfoArr.value.length; i++) {
          goodsList.value.push({
            dispatchOrderGoodsId: orderInfoArr.value[i].dispatchOrderGoodsId,
            warehouseId: orderInfoArr.value[i].warehouseId,
            goodsLocationId: orderInfoArr.value[i].locationId
          });
        }
        let createArr = {
          dispatchOrderId: prop.info[0].dispatchOrderId,
          storageDate: formArr.value.date[0],
          storageEndDate: formArr.value.date[1],
          status: formArr.value.status,
          remarks: formArr.value.remarks,
          goodsList: goodsList.value
        };
        updateStatus({
          dispatchOrderId: prop.info[0].dispatchOrderId,
          status: 3
        })
          .then(() => {
            createInventoryApi(createArr)
              .then(res => {
                if (res.code === 200) {
                  closeAllDialog();
                }
                setTimeout(() => {
                  onSearch();
                }, 250);
              })
              .catch(error => {
                message(error.response.data.msg ?? "操作失败,请联系管理员", {
                  type: "error"
                });
              });
          })
          .catch(error => {
            message(error.response.data.msg ?? "操作失败,请联系管理员", {
              type: "error"
            });
          });
      }
    });
  } else {
    for (var i = 0; i < orderInfoArr.value.length; i++) {
      addArr.value.push({
        dispatchOrderGoodsId: orderInfoArr.value[i].dispatchOrderGoodsId,
        attachment: ["http://123.jpg"],
        status: orderInfoArr.value[i].status + 1,
        remarks: orderInfoArr.value[i].remarks
      });
      orderInfoArr.value[i].status = 0;
      orderInfoArr.value[i].remarks = "";
    }
    acceptanceApi({
      dispatchOrderId: prop.info[0].dispatchOrderId,
      step: active.value,
      goodsList: addArr.value
    })
      .then()
      .catch(error => {
        message(error.response.data.msg ?? "操作失败,请联系管理员", {
          type: "error"
        });
      });
    if (active.value++ > 2) active.value = 1;
    addArr.value = [];
  }
};
const addArr = ref([]);
//发货单列表
const columns: PlusColumn[] = [
  {
    label: "订单编号",
    prop: "orderNum",
    valueType: "copy"
  },
  {
    label: "发货目的地",
    prop: "goodsDest"
  },
  {
    label: "发货日期",
    prop: "dispatchDate"
  },
  {
    label: "企业全称",
    prop: "corp.name"
  },
  {
    label: "企业负责人",
    prop: "principal"
  },
  {
    label: "状态",
    prop: "statusFormat"
  },
  {
    label: "创建时间",
    prop: "createdAt"
  },
  {
    label: "发货备注",
    prop: "remarks"
  },
  {
    label: "货物信息",
    prop: "orderGoods",
    width: 200
  }
];

const statusOptions = [
  {
    value: 1,
    label: "有效"
  },
  {
    value: 2,
    label: "无效"
  },
  {
    value: 3,
    label: "已完成"
  }
];
const goodsStatusOptions = [
  {
    value: 0,
    label: "正常"
  },
  {
    value: 1,
    label: "异常"
  },
  {
    value: 2,
    label: "其他"
  }
];
//商品列表
const goodsColumns: TableColumnList = [
  {
    label: "货物名称",
    prop: "goodsName"
  },
  {
    label: "货物编号",
    prop: "goodsNo",
    minWidth: 145
  },
  {
    label: "状态",
    prop: "status",
    minWidth: 145,
    cellRenderer: ({ row }) => (
      <el-select v-model={row.status} placeholder="请选择状态">
        {goodsStatusOptions.map(item => {
          return (
            <el-option key={item.value} label={item.label} value={item.value} />
          );
        })}
      </el-select>
    )
  },
  {
    label: "备注",
    prop: "remarks",
    cellRenderer: ({ row }) => (
      <el-input placeholder="备注" v-model={row.remarks} />
    )
  }
];
//存货单提交信息
import ReCol from "@/components/ReCol";
import { formRules } from "./utils/rule";
const goodsWarehouseColumns: TableColumnList = [
  {
    label: "货物名称",
    prop: "goodsName"
  },
  {
    label: "库房",
    prop: "warehouseId",
    slot: "warehouseSlot"
  },
  {
    label: "库位",
    prop: "locationId",
    slot: "locationSlot"
  }
];
const warehouseOptions = ref([]);
const locationOptions = ref([]);
import { getWarehouseListApi } from "@/api/warehouseApi";
import { message } from "@/utils/message";
function getWarehouseOption() {
  warehouseOptions.value = [];
  getWarehouseListApi({ perPage: 20 })
    .then(res => {
      for (var i = 0; i < res.result.list.length; i++) {
        warehouseOptions.value.push({
          value: res.result.list[i].warehouseId,
          label: res.result.list[i].name
        });
      }
    })
    .catch(error => {
      message(error.response.data.msg ?? "操作失败,请联系管理员", {
        type: "error"
      });
    });
}
function warehouseChange(row) {
  row.locationId = "";
}
import { getLocationListApi } from "@/api/locationApi";
function getLocationOption(row) {
  locationOptions.value = [];
  if (row.warehouseId === undefined) {
    message("请先选择库房", {
      type: "error"
    });
    return false;
  }
  getLocationListApi({ warehouseId: row.warehouseId, perPage: 20 })
    .then(res => {
      for (var i = 0; i < res.result.list.length; i++) {
        locationOptions.value.push({
          value: res.result.list[i].goodsLocationId,
          label: res.result.list[i].name
        });
      }
    })
    .catch(error => {
      message(error.response.data.msg ?? "操作失败,请联系管理员", {
        type: "error"
      });
    });
}
import type { FormInstance } from "element-plus";

const ruleFormRef = ref<FormInstance>();
</script>

<template>
  <div>
    <el-steps style="max-width: 800px" align-center :active="active">
      <el-step title="货场收货" />
      <el-step title="X光机查验" />
      <el-step title="生成存货单" />
    </el-steps>
    <div v-if="active === 1 || active === 2">
      <PlusDescriptions
        title="生成存货单"
        :column="2"
        :columns="columns"
        :data="prop.info[0]"
      >
        <template #plus-desc-orderGoods="{ value }">
          <pure-table :data="value" :columns="goodsColumns" />
        </template>
      </PlusDescriptions>
    </div>
    <div v-if="active === 3">
      <h3 class="mb-4">确认信息</h3>
      <el-form
        ref="ruleFormRef"
        :model="formArr"
        :rules="formRules"
        label-width="auto"
      >
        <el-row :gutter="24">
          <re-col :value="10" :xs="24" :sm="24">
            <el-form-item label="发货订单号">
              <el-input
                clearable
                :disabled="true"
                :value="prop.info[0].orderNum"
              />
            </el-form-item>
          </re-col>
          <re-col :value="10" :xs="24" :sm="24">
            <el-form-item label="存储日期" prop="date">
              <el-date-picker
                v-model="formArr.date"
                type="daterange"
                range-separator="至"
                start-placeholder="存储日期开始"
                end-placeholder="存储日期结束"
                value-format="YYYY-MM-DD"
              />
            </el-form-item>
          </re-col>
          <re-col :value="10" :xs="24" :sm="24">
            <el-form-item label="状态" prop="status">
              <el-select
                v-model="formArr.status"
                placeholder="请选择状态"
                class="w-full"
                clearable
              >
                <el-option
                  v-for="(item, index) in statusOptions"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </re-col>
          <re-col :value="20" :xs="24" :sm="24">
            <el-form-item label="备注" prop="remarks">
              <el-input
                v-model="formArr.remarks"
                placeholder="请输入备注信息"
                type="textarea"
              />
            </el-form-item>
          </re-col>
          <re-col :value="24" :xs="24" :sm="24">
            <el-form-item label="商品" prop="remarks">
              <pure-table :columns="goodsWarehouseColumns" :data="orderInfoArr">
                <template #warehouseSlot="{ row }">
                  <el-select
                    v-model="row.warehouseId"
                    placeholder="仓库"
                    size="large"
                    style="width: 240px"
                    @focus="getWarehouseOption"
                    @change="warehouseChange(row)"
                  >
                    <el-option
                      v-for="item in warehouseOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </template>
                <template #locationSlot="{ row }">
                  <el-select
                    v-model="row.locationId"
                    placeholder="库位"
                    size="large"
                    style="width: 240px"
                    @focus="getLocationOption(row)"
                  >
                    <el-option
                      v-for="item in locationOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </template>
              </pure-table>
            </el-form-item>
          </re-col>
        </el-row>
      </el-form>
    </div>
    <el-button style="margin-top: 12px; margin-left: 835px" @click="next"
      >下一步</el-button
    >
  </div>
</template>
<style scoped></style>
